<template>
  <div class="product-item " @click.stop="goDetail">
    <img class="img" :src="info.picUrl" alt="" />
    <!-- <ImageBox class="img" :src="info.picUrl" :defaultImgType="2"></ImageBox> -->
    <div class="name line-clamp2">
      <template v-if="info.brandName">
        [<span class="tag">{{ info.brandName }}</span>]
      </template>
      {{ info.productName }} {{ info.spec }}
    </div>
    <div class="price">
      <span class="price-now"><span class="price-yuan">￥</span>{{ info.activityPriceYuan || 0 }}</span>
      <!-- <span class="price-old">￥{{ info.priceYuan || 0 }}</span> -->
    </div>
  </div>
</template>

<script>
import { mapGetters, mapActions } from "vuex";
import ImageBox from "@/components/common/ImageBox.vue";
export default {
  name: "h-product-item",
  props: {
    info: {
      type: Object,
      default: () => {
        return {};
      }
    },

  },
  components: {
    ImageBox
  },
  data() {
    return {};
  },
  watch: {},
  computed: {

  },
  methods: {
    ...mapActions(["openRouteByWebview"]),
    goDetail() {
      this.openRouteByWebview({
        route: `/goods/detail?id=${this.info.id}`,
        jumpType: 'push',
        sendLocation: true
      })
      return;
    }
  },
  mounted() {
  }
};
</script>

<style scoped lang="scss" rel="stylesheet/scss">
.product-item {
  background-color: #fff;
  width: 72px;

  img {
    width: 72px;
    height: 72px;
    border-radius: 8px
  }

  .name {
    font-family: MILanPro--GB1, MILanPro--GB1;
    font-size: 14px;
    color: #333333;
    width: 100%;
    text-align: left;

    .tag {
      color: #e39429;
    }
  }

  .price {
    display: flex;
    align-items: baseline;

    .price-now {
      font-family: MILanPro_SEMIBOLD--GB1, MILanPro_SEMIBOLD--GB1;
      font-size: 16px;
      // color: #ff1818;
      color: #333;
      font-weight: 800;

      .price-yuan {
        font-size: 12px;
      }
    }

    .price-old {
      font-family: MILanPro--GB1, MILanPro--GB1;
      font-size: 10px;
      color: #999999;
      text-decoration-line: line-through;
    }
  }
}
</style>
